<template>
  <div class="leftCommonWrapper" :class="{ isShrink: state.isShrink }">
    <WarningNotification />
    <MonitoringType />
    <SmsWarning />
    <slot></slot>
    <!-- <div class="shrinkBtn" @click="handleClickShrink">
      <MenuFoldOutlined :rotate="state.iconRotate" />
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
import { MenuFoldOutlined } from "@ant-design/icons-vue";
import WarningNotification from "./WarningNotification/index.vue";
import MonitoringType from "./MonitoringType/index.vue";
import SmsWarning from "./SmsWarning/index.vue";

defineOptions({ name: "LeftCommon" });

const state = reactive({
  isShrink: false,
  iconRotate: 0,
});

const props = defineProps({
  isCollapse: { type: Boolean },
});

// 一键收起侧边栏
watch(
  () => props.isCollapse,
  (val) => {
    state.isShrink = val;
    state.iconRotate = val ? 180 : 0;
  }
);

const handleClickShrink = () => {
  state.isShrink = !state.isShrink;
  state.iconRotate = state.isShrink ? 180 : 0;
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.leftCommonWrapper {
  width: 680px;
  height: 978px;
  position: absolute;
  top: 60px;
  left: 60px;
  z-index: 200;
  transition: all 0.5s;
  transform: translateX(0px);
  padding: 4px 8px 8px 8px;
  display: grid;
  grid-template-rows: minmax(300px, 33%) minmax(280px, 30%) minmax(280px, 34%);
  grid-row-gap: 6px;
  .column {
    width: 680px;
    display: flex;
  }
  /* .shrinkBtn {
      width: 28px;
      height: 28px;
      background: rgba(204, 243, 228, 0.8);
      color: #5ac99b;
      border-radius: 4px;
      position: absolute;
      top: 0px;
      left: 1080px;
      z-index: 1000;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.6;
      transition: all 0.5s;
      transform: translateX(0px);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      &:hover {
        background: rgba(204, 243, 228, 1);
        opacity: 1;
      }
    } */
}
.isShrink {
  transform: translateX(-680px);
}
</style>
